<template>
    <div class="searchPage">
        <div>
            <span @click=" setSort('pop')" :style=" sort=='pop'?'color:#f6486e;':'' ">综合</span>
            <span @click=" setSort('sell')" :style=" sort=='sell'?'color:#f6486e;':'' ">销量</span>
            <span @click=" setSort('new')" :style=" sort=='new'?'color:#f6486e;':'' ">新品</span>
        </div>
        <ScrollView>
            <GoodsItem :GoodsData="searchGoodsData" />
        </ScrollView>
    </div>
</template>

<script>
import GoodsItem from "../components/GoodsItem";

export default {
    name: "search",
    components: {
        GoodsItem
    },
    data() {
        return {
            sort: "pop",
            searchGoodsData: []
        };
    },
    methods: {
        setSort(sort) {
            this.searchGoodsData = [];
            this.setSearchGoodsData(sort);
        },
        setSearchGoodsData(sort = "pop") {
            this.sort = sort;
            let params = {
                sort: sort,
                page: 1
            };
            //根据是否有无传递来的q来判断接入哪个接口
            if (this.$route.query.q) {
                params.cKey = 46;
                params.q = this.$route.query.q;
            } else {
                params.cKey = 46;
                params.q = this.$route.query.title;
                if (this.$route.query.fcid) {
                    params.cKey = 16;
                    params.title = this.$route.query.title;
                    params.fcid = this.$route.query.fcid;
                }
            }
            // let params = {
            //     title:this.$route.query.title,
            //     cKey: 16,
            //     page: 1,
            //     sort: sort
            // };
            // if (this.$route.query.fcid) {
            //     params.fcid = this.$route.query.fcid;
            // }

            this.$api
                .loadGoodsItem(params)
                .then(data => {
                    this.searchGoodsData = data.wall.docs;
                })
                .catch(this.$error);
        }
    },
    watch: {
        "$route.query.q": function() {
            this.$root.$emit("changeWk", this.$route.query.q);
            this.setSearchGoodsData();
        }
    },
    mounted() {
        this.setSearchGoodsData();
        this.$root.$emit(
            "changeWk",
            this.$route.query.q || this.$route.query.title
        );
    }
};
</script>

<style lang="less" scoped>
.searchPage {
    width: 100vw;
    position: absolute;
    top: @h;
    bottom: 0;
    overflow: hidden;
    > div:first-child {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        padding: 20px 0;
        border-bottom: 1px solid @de;
        color: @font;
        font-size: 29px;
        font-weight: bold;
        span {
            flex-grow: 1;
            text-align: center;
        }
        span:first-child {
            border-right: 1px solid @de;
        }
        span:last-child {
            border-left: 1px solid @de;
        }
    }
    > div:last-child {
        position: absolute;
        top: 90px;
        bottom: 0;
        overflow: hidden;
    }
}
</style>